<style>
    .root {
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0 0 5px rgba(0,0,0,.1);
        border-radius: 4px;
        padding-bottom: 20px;
    }
    .finishFollowup .title {
        line-height: 40px;
        background-color: #f5f5f5;
        box-sizing: border-box;
        padding-left: 20px;
    }
    .finishFollowup .ctrl {
        width: 100%;
        height: 72px;
        padding: 20px;
    }
    .finishFollowup .ctrl .label {
        font-size: 14px;
        color: #333;
        margin-right: 5px;
    }
    .finishFollowup .ctrl .input {
        width: 200px;
    }
    .finishFollowup .footer {
        text-align: right;
        padding-top: 20px;
    }
</style>

<body>
    <div class="root finishFollowup">
        <div class="title">已结案志愿者列表</div>
        <div class="ctrl">
            <span class="label">姓名:</span>
            <el-input size="small" placeholder="请填写姓名" class="input" v-model="search.name" clearable />
            <span class="label">手机号:</span>
            <el-input size="small" placeholder="请填写手机号" class="input" v-model="search.phone" clearable />
            <el-button @click="handleClear" type="warning" size="small" icon="el-icon-circle-close" style="margin-left: 30px;">清除</el-button>
            <el-button @click="handleSearch" type="primary" size="small" icon="el-icon-search">搜索</el-button>
        </div>
        <el-table :data="table.data" style="width: calc(100% - 40px); margin: 0 auto;" v-loading="table.loading" border>
            <el-table-column prop="No" label="序号" width="80" align="center"></el-table-column>
            <el-table-column prop="userName" label="姓名"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="closeType" label="结案类型">
                <template slot-scope="scope">
                    {{ scope.row.closeType == 1 ? '手动终止' : '随访期结束' }}
                </template>
            </el-table-column>
            <el-table-column prop="birthdate" label="出生日期">
                <template slot-scope="scope">
                    {{ scope.row.birthdate.split(' ')[0] }}
                </template>
            </el-table-column>
            <el-table-column prop="closeReason" label="结案原因"></el-table-column>
            <el-table-column prop="createTime" label="结案日期">
                <template slot-scope="scope">
                    {{ scope.row.createTime.split(' ')[0] }}
                </template>
            </el-table-column>
            <el-table-column prop="queueName" label="结案时所属队列"></el-table-column>
            <el-table-column prop="taskName" label="结案时期"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-right" @click="handleToDetail(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="footer">
            <el-pagination
                background
                :current-page="table.current"
                @current-change="handleChangePage"
                layout="prev, pager, next, total"
                :total="table.total">
            </el-pagination>
        </div>
    </div>
</body>

<script>
require(['bbcare'], function ($bb) {
    var FollowURL = $bb.baseUrl("followup");
    var vm = new Vue({
        el: '.root',
        data: {
            table: {
                current: 1,
                size: 10,
                total: 0,
                data: [],
                loading: false,
            },
            search: {
                name: '',
                phone: ''
            }
        },
        created: function () {
            this.getTableData();
        },
        methods: {
            handleSearch: function () {
                this.table.current = 1;
                this.getTableData();
            },
            handleChangePage: function (num) {
                this.table.current = num;
                this.getTableData();
            },
            handleToDetail: function (row) {
                var params = {
                    birthday: row.birthdate.split(' ')[0],
                    expectedDay: row.expectedDay,
                    followQueueId: row.queueId,
                    gender: row.gender,
                    imgSrc: row.gender == 'N' || row.gender == 1 ? 'page/followup/imgs/comm/boy.png' : 'page/followup/imgs/comm/girl.png',
                    patientId: row.userId,
                    patientName: row.userName,
                    patientSchemeId: row.ptSchemeid,
                    pregnancyDay: row.pregnancyDay,
                    queuename: row.queueName,
                }
                $bb.openPage("outPatient",params);                
            },
            handleClear: function () {
                this.search = {
                    name: '',
                    phone: ''
                };
                this.getTableData();
            },
            getTableData: function () {
                var that = this;
                $bb.ajax({
                    url: FollowURL + 'followup/service/patient/getClosecaseData',
                    data: JSON.stringify({data: {
                        patientName: this.search.name,
                        phoneNum: this.search.phone,
                        page: this.table.current,
                        rows: this.table.size,
                    }}),
                    success: function (res) {
                        that.table.total = res.total;
                        that.table.data = that.addNo(res.rows);
                    }
                })
            },
            addNo: function (list) {
                var that = this;
                list.forEach(function (item, index) {
                    item.No = (that.table.current - 1) * that.table.size + index + 1;
                });
                return list;
            }
        }
    });
})
</script>